<script>
import {getCourseList} from "@/api/getCourseList";
import {getToken} from "@/utils/localStorage";
import {getCourseImage} from "@/utils/getCourseImage";
export default {
  name: "MyCourses",
  components: {},
  data(){
    return{
      courses: [],    // 存储课程数据
      loading: false, // 加载状态
      error: null     // 错误信息
    }
  },
  methods:{
    getCourseImage: getCourseImage,
    ToCourse(course) {
      // 跳转到具体的课程页面，并传递课程ID
      this.$router.push({
        path: `/courses/${course.course_id}`,
        query: {
          courseImg: course.course_img,
          courseName: course.course_name,
          courseId: course.course_id
        }
      });
    },
    addCourse(){
      this.$router.push('#');
    },
    async fetchCourses() {
      this.loading = true;  // 开始加载
      try {
        const response = await getCourseList();  // 调用 API 获取课程列表
        if (response && response.data) {
          this.courses = response.data;  // 保存课程数据，前提是response和response.data都存在
          console.log(this.courses)
        }
          if (!getToken()) {
            // 处理401错误，Token 已经被清除，重定向到登录页
            this.$message({
              message: '身份验证已过期 请重新登录',
              center: true,
              type: 'warning',
              duration: '1500',
              offset: '80',
            });
            // 重定向到登录页面
            this.$router.push('/login');
          }
      } catch (error) {
        this.error = '获取课程列表失败';  // 错误处理
        console.error(error);
      } finally {
        this.loading = false;  // 加载结束
      }
    },

  },
  created() {
    this.fetchCourses();  // 组件加载时获取课程列表

  },
}
</script>

<template>
  <div class="course-main">
    <div class="course-btn">
      <el-button @click="addCourse">添加课程</el-button>
    </div>

    <!-- 错误信息 -->
    <div v-if="error" class="error-message">
      <p>{{ error }}</p>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-message">
      <p>加载中...</p>
    </div>

    <!-- 课程列表 -->
    <div class="container" v-if="courses.length > 0 && !loading && !error">
      <div class="learn-course" v-for="course in courses" :key="course.course_id" @click="ToCourse(course)">
        <div class="course-cover">
          <el-image :src="getCourseImage(course.course_img)" fit="fill"></el-image>
          <h3 class="course-title">{{ course.course_name }}</h3> <!-- 动态渲染课程名称 -->
        </div>
        <div class="course-info">
          <p>{{ course.course_description }}</p> <!-- 动态渲染教师名称 -->
        </div>
<!--        <div class="course-info">
          <p>{{ course.teacher_name }}</p> &lt;!&ndash; 动态渲染教师名称 &ndash;&gt;
        </div>-->
      </div>
    </div>

    <!-- 如果没有课程数据 -->
    <div v-else-if="!loading && !error">
      <p>暂无课程数据。</p>
    </div>
  </div>


</template>

<style scoped>
.course-main .course-btn{
  margin-top: 20px;
  margin-left: 40px;

}
.course-main .course-btn .el-button {
  border-radius: 20px;
}
.container {
  padding: 50px 30px;
}
.container .learn-course {
  float: left;
  position: relative;
  width: 240px;
  height: 300px;
  font-size: 12px;
  box-sizing: border-box;
  vertical-align: top;
  color: #131B26;
  overflow: visible;
  cursor: pointer;
  margin-right: 40px;
  margin-bottom: 0;
}
.course-cover .el-image{
  border-radius: 8px;
}
.learn-course .course-info {
  line-height: 17px;
  margin-top: 8px;
  font-size: 12px;
}
.course-title {
  display: inline-block;
  margin-top: 10px;
}
.course-cover:hover .course-title{
  color: #3A8BFF;
}
.course-cover:hover .el-image {
  box-shadow: 4px 2px 6px 4px rgba(43, 51, 59, 0.06);
}
.course-info p {
  color: #a8a8b3;
  line-height: 17px;
  margin-top: 8px;
  font-size: 12px;
}

</style>
